html,body{-webkit-user-select:none; height: 100%;}
html,body,h1,h2,h3,p,ul,li,input{padding: 0; margin: 0;}
html{ font-size: 14px;}
body{font-family: "Hiragino Sans GB","Microsoft YaHei","黑体",Arial,sans-serif; color: #333; -webkit-overflow-scrolling: touch;}
input,textarea,select,option{font-family: "Hiragino Sans GB","Microsoft YaHei","黑体",Arial,sans-serif; font-size: 1rem;}
a{text-decoration: none; color: #5b728f;}
ul{list-style: none;}
.img-auto{width: 100%;}
.loading{height: 100%; overflow: hidden;}
.loading-box{ display: none; position: fixed; z-index: 21000; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: #fff;}
.loading-anim{background: url('../images/loading1.gif') no-repeat center center; background-size: 30px auto; width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin:-15px 0 0 -15px; text-indent: -1000px;}
.loading .loading-box{display: block;}
.uploading .loading-box{display: block; background: rgba(0,0,0,0.3); }
.uploading .loading-anim{padding: 10px 10px 10px 50px; width: 110px; line-height: 30px; background-position: 10px center; background-color: #fff; margin: -30px 0 0 -85px; border-radius: 3px; text-indent: 0;}
.date-box{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 1000;}
.date-box .pika-single{height: 230px; width: 260px; margin:20% auto 0 auto; border-radius: 3px;}

.common-footer{position: fixed; bottom: 0; left: 0; right: 0; display:-webkit-box;}
.common-footer .comm-btn{-webkit-box-flex:1;}
.common-footer .white{color: #4c4c4c; background: #fff;}

.groupim-page{background: #f0f0f0; min-height: 100%; overflow: hidden; padding-bottom: 60px; box-sizing:border-box;}
.groupim-page .content-box{}
.groupim-page .userchat-list{ margin: 0 15px;}
.groupim-page .userchat-list li{position: relative; float: left; line-height: 40px; margin: 10px 0; clear: both; max-width:100%;}
.groupim-page .userchat-list li .user-header{position: absolute; left: 0; top: 0; display: inline-block; height: 40px; width: 40px; border-radius: 40px; overflow: hidden;}
.groupim-page .userchat-list li .user-header img{ height: 100%;}
.groupim-page .userchat-list li .box{line-height: 40px; float: left; margin-left: 50px;}
.groupim-page .userchat-list li .text, .groupim-page .userchat-list li .voice{position: relative; float: left; background: #fff; border:1px solid #ccc; font-size: 1.1rem; line-height: 24px; border-radius: 5px; padding:4px 10px; word-break:break-all;}
.groupim-page .userchat-list li .uname{font-size: 12px; line-height: 18px; padding: 0 2px; color: #999;}
.groupim-page .userchat-list .right{float: right; clear: both;}
.groupim-page .userchat-list .right .uname{text-align: right;}
.groupim-page .userchat-list .right .user-header{left: auto; right: 0.2rem;}
.groupim-page .userchat-list .right .box{ float: right;  margin-right: 50px; margin-left: 0;}
.groupim-page .userchat-list .right .text, .groupim-page .userchat-list .right .voice{position: relative; float: right; background: #b2e281; color: #333; border:1px solid #a4d176;}
.groupim-page .userchat-list .noresult{text-align: center; width: 100%; float: none;}
.groupim-page .userchat-list li .voicet{color: #888; display: inline-block; height: 40px; line-height: 40px; margin: 0 10px;}
.groupim-page .userchat-list li .voice{ width: 20px; line-height: 32px; height: 32px; display: inline-block; background: url('../images/voice-gray.png') #fff no-repeat 10px center; background-size: 16px auto;}
.groupim-page .userchat-list li .playing{background: url('../images/voice-gray.gif') #fff no-repeat 10px center; background-size: 16px auto;}
.groupim-page .userchat-list li .img-box{float: left; max-width: 30%; border:1px solid #ccc; border-radius: 5px; position: relative; overflow: hidden;}

.groupim-page .userchat-list .right .voice{background: url('../images/voice-green.png') #b2e281 no-repeat right 10px center; background-size: 16px auto;}
.groupim-page .userchat-list .right .playing{background: url('../images/voice-green.gif') #b2e281 no-repeat right 10px center; background-size: 16px auto;}
.groupim-page .userchat-list .right .img-box{float: right;}

.groupim-page .common-footer{background: #fff; padding: 5px 0; overflow: hidden;}
.chat-arrow:after, .chat-arrow:before{content: "\200B"; height: 0; border:5px solid #fff; border-color: transparent #fff transparent transparent; position: absolute; left: -10px; top: 11px;}
.chat-arrow:before{ border-color: transparent #ccc transparent transparent; left: -11px;}
.right .chat-arrow:after, .right .chat-arrow:before{border-color: transparent transparent transparent #b2e281; left: auto; right: -10px;}
.groupim-page .common-footer{display: block;}
.groupim-page .finput-box{ border:1px #ccc solid; border-radius: 3px; position: absolute; left: 45px; right: 60px;}
.groupim-page .send-inp{width: 96%; height: 33px; line-height: 33px; border: 0; padding: 0 2%;}
.groupim-page .common-footer .comm-btn{display: block; position: relative;  }
.groupim-page .common-footer .btn-voice{float: left; background: url('../images/contact_mic.png') no-repeat center center; height: 35px; width: 35px; background-size: 35px auto; border-radius: 5px; margin-left: 5px;}
.groupim-page .voice-inp, .groupim-page .voice-footer .send-inp{display: none;}
.groupim-page .voice-footer .btn-voice{background: url('../images/keyboard.png') no-repeat center center; background-size: 35px auto;}
.groupim-page .voice-footer .finput-box{right: 5px;}
.groupim-page .voice-footer .voice-inp{display: block; height: 33px; line-height: 33px; margin: 0; text-align: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
.groupim-page .voice-footer .touchstart{background: rgba(0,0,0,0.2);}
.groupim-page .add-photo-btn{display: none; background: transparent; border: 0; position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0;}
.groupim-page .common-footer .send-btn-box{float: right; margin-right: 5px; width: 50px; position: relative; height: 35px; }
.groupim-page .common-footer .btn-send{background: #ff9642; color: #fff; text-align: center; font-size: 1.1em; width: 50px; border-radius: 3px; height: 35px; line-height: 35px;}
.groupim-page .voice-footer .btn-send{display: none; background: url('../images/message_more_pic.png') no-repeat center center; background-size: 35px auto; text-indent: 1000px;}

.groupim-page .voice-footer .add-photo-btn{display: block;}
.groupim-page .mic-notice{ font-size: 0.9rem; text-align: center; padding-top: 60px; color: #fff; border-radius: 5px; display: none; position: fixed; bottom: 200px; margin-left: -50px; left: 50%; background: url('../images/mic_icon.png') rgba(0,0,0,0.6) no-repeat center 10px; background-size: 30px auto; min-width: 100px; height: 30px; }
.groupim-page .cancel-mic{ padding-top: 40px;background: url('../images/mic_cancel.png') rgba(0,0,0,0.6) no-repeat center 10px; background-size: 30px auto; }
.groupim-page .cancel-text{background: rgba(0,0,0,0.6); line-height: 30px; padding: 5px 10px;}
.groupim-page .userchat-list .notice{text-align: center; float: none; margin: 10px 0 0 0;}
.groupim-page .userchat-list .notice span{display: inline-block; background: #ccc; border-radius: 3px; padding: 3px 5px; line-height: 1em; color: #fff; font-size: 0.9rem;}

.login-msg{background: #f2f76b; color: #e91a38; font-size: 12px; text-align: center; line-height: 30px; display: none;}
.login-mask{position: fixed; z-index: 200; background: rgba(0,0,0,.5); top: 0; width: 100%; bottom: 0;}
.login-box{padding: 10px 0; position: absolute; z-index: 201; background: #fff; width: 80%; left: 10%; top: 30%; border-radius: 3px;}
.login-box .item-box{ height: 30px; padding: 5px 0; border-bottom: 1px #ccc solid;}
.login-box .item-title{height: 30px; width: 60px; line-height: 30px; float: left; padding: 0 10px; position: relative;}
.login-box .item-input{position: absolute; left: 60px; right: 0;}
.login-box .item-input input{border: 0; background: transparent; height: 30px; line-height: 30px; width: 90%; padding: 0 10px;}
.login-box .login-footer{margin-top: 8px;}
.login-box .comm-btn{background: #46b7f8; color: #fff; text-align: center; width: 80px; height: 28px; line-height: 28px; float: right; margin-right: 20px; font-size: 0.9rem; margin-top: 3px;}
.login-box .comm-btn:hover,.login-box .comm-btn:active{background: #75cafb;}
.login-box .no-border{border: 0;}
.login-box .item-rbox, .room-box .item-ubox, #J_btn-join, .room-box #J_btn-login{display: none;}
.room-box .item-rbox, .room-box #J_btn-join{display: block;}

.groupim-page .userchat-list .msg-error:before{content: "!"; color: #ff0; background: #f00; width: 16px; height: 16px; line-height: 16px; border-radius: 16px; font-size: 12px; text-align: center; position: absolute; left: -22px; top: 13px; border:0;}

.get-history-msg-btn {position: fixed;bottom: 50px;left: 10px;background: url('../images/history.png') no-repeat center center; height: 35px; width: 35px; background-size: 35px auto;}
